<template>

  <div>

  <div id="main_div" style="margin-top: 80px">

    <el-card shadow="always"  style="width: 500px;height: 600px;float: right">
      <el-form label-width="60px" style="margin-top: 10px;width:460px" >
        <el-form-item >
          <h1 style="font-size: 30px;margin: 10px">立即注册
            <a href="/login" style="color: #0aa1ed;text-decoration: none;font-size: 15px;float: right">已有账号，现在登录</a></h1>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input placeholder="用户名" v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input placeholder="昵称" v-model="user.nickname"></el-input>
        </el-form-item>
        <el-form-item label="密码">
        <el-input type="password" placeholder="请输入密码" v-model="user.password"></el-input>
      </el-form-item>
        <el-form-item label="手机号">
          <el-input placeholder="请输入手机号码" v-model="user.phone"></el-input>
        </el-form-item>
        <el-form-item >
          <p><el-checkbox  v-model="checked"></el-checkbox>我同意<a href="https://www.atzuche.com/about/vipServiceWeb" style="color: black">《凹凸租车会员服务协议》</a>
            和<a href="https://www.atzuche.com/about/privacyPolicy" style="color: black">《凹凸租车隐私协议》</a></p>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="post()">马上注册</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
<!--   4块服务 -->
    <div style="width:1200px;margin: 0 auto;text-align: center">
    <el-row gutter="20" style="margin-top: 50px;">
      <el-col :span="6">
        <i style="font-size: 50px" class="el-icon-suitcase"></i>
        <h3>高额度保障</h3>
        <h3>保障无忧用车</h3>
        <p>全方位保障</p>
        <p>用车安心</p>
      </el-col>
      <el-col :span="6">
        <i style="font-size: 50px" class="el-icon-collection"></i>
        <h3>免租车押金</h3>
        <h3>更低门槛</h3>
        <p>芝麻信用分达到650以上</p>
        <p>就可以免租车押金</p>
      </el-col>
      <el-col :span="6">
        <i style="font-size: 50px" class="el-icon-mobile-phone"></i>
        <h3>手机在线下单</h3>
        <h3>流程一目了然</h3>
        <p>押金支付，用车流程，违章理赔</p>
        <p>APP里全搞定</p>
      </el-col>
      <el-col :span="6">
        <i style="font-size: 50px" class="el-icon-truck"></i>
        <h3>车管家取送车</h3>
        <h3>上门服务</h3>
        <p>车管家带您无忧交接车</p>
      </el-col>
    </el-row>
    <div style="background-color: #42b983;width: 50px;height: 3px;
    text-align: center;margin: 0 auto;margin-top: 50px"></div>
    <h2 style="text-align: center;margin: 0 auto;margin-top: 50px">支持全国150个城市 各种车型任您选择</h2>
    <h3 style="text-align: center;margin: 0 auto;margin-top: 50px">上海、北京、广州、深圳、南京、杭州、苏州、成都、重庆…</h3>
    <el-row style="text-align: center;margin: 0 auto;margin-top: 50px" :gutter="20">
      <el-col :span="8">
          <img src="/car1.jpg" width="100%" height="">
              <p style="float: left">高尔夫</p>
              <p style="float: right;color: red">5.0</p>
      </el-col>
      <el-col :span="8">
        <img src="/car2.jpg" width="100%">
        <p style="float: left">宝马</p>
        <p style="float: right;color: red">5.0</p>
      </el-col>
      <el-col :span="8">
        <img src="/car3.jpg" width="100%">
        <p style="float: left">特斯拉</p>
        <p style="float: right;color: red">5.0</p>
      </el-col>
    </el-row>
    </div>

  </div>
</template>

<script>
export default {
  name: "RegView",
  data() {
    return {
      user: [],
      checked: true,
    }
  },
  methods: {
    post() {
      if (this.checked){
        let data = this.qs.stringify(this.user);
        this.axios.post("http://localhost:19480/users/register",data)
            .then((response)=>{
              if (response.data.state == 20000){
                this.$message.success("注册成功");
                this.$router.push("/login");
              }else {
                this.$message.error(response.data.message);
              }
            })
      } else {
        this.$alert('请勾选上方协议', '', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
      }


    }
  }
}
</script>

<style scoped>
#main_div{
  height: 500px;
  background-size: cover/*设置为封面*/;
  background-position: center;
  background-image: url("/public/background.png");
  overflow: hidden;
}
</style>